import { colorOptions, columns, tableActiveKey } from "./store";
import { tableLoading } from "@user/popular/table";
import defaultAvatarUrl from "@/assets/img/default-avatar.png";
import { auditStateMap } from "./dict";
import { fetchList, handleAction } from ".";
export const tablePage = renderTablePage();
export const tableData = ref([]);
const defineBodyCellMap = (number, { value, text, index, column, record }) => {
  const authDetailMap = {
    0: "authApi.queryDataById",
    1: "",
  };
  const renderImage = () => (
    <div>
      <a-image
        width="40px"
        height="40px"
        src={!isEmptyType(value) ? value : defaultAvatarUrl}
      />
    </div>
  );

  const renderStatus = () => (
    <div>
      <i class={colorOptions[record.status]}>
        {selectDictLabel(auditStateMap, record.status)}
      </i>
    </div>
  );

  const renderAction = () => {
    if (number === 0)
      return (
        <div>
          {withDirectivePower({
            vNode: (
              <div class="s-table-body_cell">
                {renderDetail.call({
                  record,
                  handleAction,
                  identify: authDetailMap[number],
                })}
                <a-divider type="vertical" />
              </div>
            ),
            bindingValue: "authApi.queryDataById",
          })}

          {record.status === 1 ? (
            <>
              {withDirectivePower({
                vNode: (
                  <>
                    <div class="s-table-body_cell">
                      {renderAgree.call({
                        record,
                        handleAction,
                        identify: "authApi.updatePass",
                      })}
                      <a-divider type="vertical" />
                    </div>
                  </>
                ),
                bindingValue: "authApi.updatePass",
              })}
              {withDirectivePower({
                vNode: renderRefuse.call({
                  record,
                  handleAction,
                  identify: "authApi.updateReject",
                }),
                bindingValue: "authApi.updateReject",
              })}
            </>
          ) : null}
        </div>
      );
    return (
      <div>
        {withDirectivePower({
          vNode: (
            <div class="s-table-body_cell">
              <s-button
                onClick={() => handleAction({ record, type: "view" })}
                type="link"
              >
                {$t("base.detail")}
              </s-button>
              <a-divider type="vertical" />
            </div>
          ),
          bindingValue: "authApi.queryDataById",
        })}
        {withDirectivePower({
          vNode: (
            <div class="s-table-body_cell">
              {renderAgree.call({
                record,
                handleAction,
                identify: "authApi.updatePass",
              })}
              <a-divider type="vertical" />
            </div>
          ),
          bindingValue: "authApi.updatePass",
        })}
        {withDirectivePower({
          vNode: (
            <div class="s-table-body_cell">
              {renderRefuse.call({
                record,
                handleAction,
                identify: "authApi.updateReject",
              })}
              <a-divider type="vertical" />
            </div>
          ),
          bindingValue: "authApi.updateReject",
        })}
        {withDirectivePower({
          vNode: (
            <s-button
              onClick={() => handleAction({ record, type: "markLevel" })}
              type="link"
            >
              {$t("base.specifyPopularityLevel")}
            </s-button>
          ),
          bindingValue: "popularApi.update",
        })}
      </div>
    );
  };
  return new Map([
    [{ key: "index", state: /[0]/ }, renderIndex],
    [{ key: "created_at", state: /[0]/ }, renderCreatedAt],
    [{ key: "updated_at", state: /[0]/ }, renderCreatedAt],
    [{ key: "client_avatar", state: /[0]/ }, renderImage],
    [{ key: "real_photo", state: /[0]/ }, renderImage],
    [{ key: "status", state: /[0]/ }, renderStatus],
    [
      { key: "userInfo", state: /[0]/ },
      renderUserInfo.bind({ record, tableLoading }),
    ],
    [{ key: "action", state: /[0]/ }, renderAction],
  ]);
};
const handleRenderBodyCellTask = (number, props) => {
  const array = [...defineBodyCellMap(number, props)].filter(
    ([object]) => object.key === props.column.key && object.state.test(number)
  );
  const _this = { number, tablePage, ...props };
  return array.map(([, value]) => value.call(_this));
};
export const tableConfig = () => {
  const defineTable = {
    pagination: tablePage,
    columns,
    dataSource: tableData,
    loading: tableLoading,
    on: {
      change(paging: { current: number; pageSize: number }) {
        tablePage.current = paging.current;
        tablePage.pageSize = paging.pageSize;
        fetchList();
      },
    },
    tableSlot: {
      bodyCell: (props) =>
        handleRenderBodyCellTask(tableActiveKey.value, props),
    },
  };
  return defineTable;
};
